<template>
    <app-dialog  ref="advanceSearch" dialogTitle="高级检索" originTitle staticDialog width="50%">
        <div class="AdvancedSearch__content">
            <div class="AdvancedSearchBar">
              <div class="Rows">
                <base-row  class="Row" v-for="(strategy, index) in advanceSearchMap[searchType]" :key="index" :gutter="12" >
                  <base-col v-if="index > 0" :span="3">
                    <base-select v-model="strategy.relation.value" class="AdvancedSearchBarSelect" :ripple="false" placement="bottom" :show-label="false" size="small" @change="forceUpdate" popper-class="AdvancedSearchBarSelectPopper">
                      <base-option v-for="item in strategy.relation.option" :value="item.value" :label="item.label" :key="item.value"></base-option>
                    </base-select>
                  </base-col>
                  <base-col :offset="index === 0 ? 3 : 0" :span="4">
                    <base-select v-model="strategy.field.value" class="AdvancedSearchBarSelect" :ripple="false" placement="bottom" :show-label="false" size="small" @change="forceUpdate" popper-class="AdvancedSearchBarSelectPopper">
                      <base-option v-for="item in strategy.field.option" :value="item.value" :label="item.label" :key="item.value"></base-option>
                    </base-select>
                  </base-col>
                  <base-col :span="11">
                    <base-input v-model="strategy.value" :placeholder="'请输入' +getOptionLabel(strategy)" size="small" :ripple="false" :show-label="false" class="AdvancedSearchBarInput" @input="forceUpdate" @key-up-enter="doSearchWithStrategy(false)"></base-input>
                  </base-col>
                  <base-col :span="3">
                    <base-select v-model="strategy.type.value" class="AdvancedSearchBarSelect" :ripple="false" placement="bottom" :show-label="false" size="small" @change="forceUpdate" popper-class="AdvancedSearchBarSelectPopper">
                      <base-option v-for="item in strategy.type.option" :value="item.value" :label="item.label" :key="item.value"></base-option>
                    </base-select>
                  </base-col>
                  <base-col :span="3" v-if="index > 0">
                    <button v-if="index === advanceSearchMap[searchType].length - 1 && index < strategy.field.option.length - 1" class="Button Button--plain" type="button" @click="addStrategy"><i class="base-icon-circle-plus-outline"></i></button>
                    <button v-if="index > 1" class="Button Button--plain" type="button" @click="removeStrategy(index)"><i class="base-icon-remove-outline"></i></button>
                  </base-col>
                </base-row>
                <!-- <base-row class="Row Row--date" :gutter="12">
                  <base-col :span="3" class="DateLabel"><span>时间范围</span></base-col>
                  <base-col :span="4">
                    <base-date-picker class="AdvancedSearchBarDatePicker" v-model="dateRangeStart" size="small" type="year" :ripple="false" value-format="yyyy" :placeholder="$t('explore.start')" prefix-icon="" :picker-options="dateRangeStartPickerOptions" @change="forceUpdate"></base-date-picker>
                  </base-col>
                  <base-col :span="2" class="DateLabel"><span>至</span></base-col>
                  <base-col :span="4">
                    <base-date-picker class="AdvancedSearchBarDatePicker" v-model="dateRangeEnd" size="small" type="year" :ripple="false" value-format="yyyy"  :placeholder="$t('explore.end')" prefix-icon="" :picker-options="dateRangeEndPickerOptions" @change="forceUpdate"></base-date-picker>
                  </base-col>
                </base-row> -->
                <div class="RowActions">
                  <base-button class="AdvancedSearchSubmitButton" type="primary" @click="doSearchWithStrategy" :disabled="isAdvancedDisabled || isLoading" :loading="isLoading"><span v-if="!isLoading">检索</span></base-button>
                  <base-button light @click="resetStrategy">重置</base-button>
                </div>
              </div>
            </div>
        </div>
    </app-dialog>
</template>

<script>
import {XCard,AppDialog} from "@zkwq/business";
export default {
  components:{XCard,AppDialog},
  data(){
    return {
        searchType:"",
        advanceSearchMap: {},
        isAdvancedDisabled: true,
        isLoading: false,
    }
  },
  mounted(){
  },
  methods:{
    initAdvanceSearch(){
      this.advanceSearchMap[this.VIDEO] = [
        {
          field: {
            value: 'name',
            option: [
              {label: "名称", value: 'name'},
              {label: '主讲人', value: 'speaker'},
              {label: '主办单位', value: 'organizer'},
              {label: '简介', value: 'intro'},
            ]
          },
          value: null,
          relation: {
            value: null,
            option: [
              {label: 'AND', value: 'AND'},
              {label: 'OR', value: 'OR'},
              {label: 'NOT', value: 'NOT'},
            ]
          },
          type: {
            value: 'accurate',
            option: [
              {label: '精确', value: 'accurate'},
              {label: '模糊', value: 'fuzzy'}
            ]
          }
        },
        {
          field: {
            value: 'speaker',
            option: [
              {label: "名称", value: 'name'},
              {label: '主讲人', value: 'speaker'},
              {label: '主办单位', value: 'organizer'},
              {label: '简介', value: 'intro'},
            ]
          },
          value: null,
          relation: {
            value: 'AND',
            option: [
              {label: 'AND', value: 'AND'},
              {label: 'OR', value: 'OR'},
              {label: 'NOT', value: 'NOT'},
            ]
          },
          type: {
            value: 'accurate',
            option: [
              {label: '精确', value: 'accurate'},
              {label: '模糊', value: 'fuzzy'}
            ]
          }
        }
      ]
      this.advanceSearchMap[this.AUDIO] = [
        {
          field: {
            value: 'name',
            option: [
              {label: "名称", value: 'name'},
              {label: '主讲人', value: 'speaker'},
              {label: '主办单位', value: 'organizer'},
              {label: '简介', value: 'intro'},
            ]
          },
          value: null,
          relation: {
            value: null,
            option: [
              {label: 'AND', value: 'AND'},
              {label: 'OR', value: 'OR'},
              {label: 'NOT', value: 'NOT'},
            ]
          },
          type: {
            value: 'accurate',
            option: [
              {label: '精确', value: 'accurate'},
              {label: '模糊', value: 'fuzzy'}
            ]
          }
        },
        {
          field: {
            value: 'speaker',
            option: [
              {label: "名称", value: 'name'},
              {label: '主讲人', value: 'speaker'},
              {label: '主办单位', value: 'organizer'},
              {label: '简介', value: 'intro'},
            ]
          },
          value: null,
          relation: {
            value: 'AND',
            option: [
              {label: 'AND', value: 'AND'},
              {label: 'OR', value: 'OR'},
              {label: 'NOT', value: 'NOT'},
            ]
          },
          type: {
            value: 'accurate',
            option: [
              {label: '精确', value: 'accurate'},
              {label: '模糊', value: 'fuzzy'}
            ]
          }
        }
      ]
      this.advanceSearchMap[this.TEXT] = [
        {
          field: {
            value: 'name',
            option: [
              {label: "名称", value: 'name'},
              {label: '主讲人', value: 'speaker'},
              {label: '主办单位', value: 'organizer'},
              {label: '简介', value: 'intro'},
            ]
          },
          value: null,
          relation: {
            value: null,
            option: [
              {label: 'AND', value: 'AND'},
              {label: 'OR', value: 'OR'},
              {label: 'NOT', value: 'NOT'},
            ]
          },
          type: {
            value: 'accurate',
            option: [
              {label: '精确', value: 'accurate'},
              {label: '模糊', value: 'fuzzy'}
            ]
          }
        },
        {
          field: {
            value: 'speaker',
            option: [
              {label: "名称", value: 'name'},
              {label: '主讲人', value: 'speaker'},
              {label: '主办单位', value: 'organizer'},
              {label: '简介', value: 'intro'},
            ]
          },
          value: null,
          relation: {
            value: 'AND',
            option: [
              {label: 'AND', value: 'AND'},
              {label: 'OR', value: 'OR'},
              {label: 'NOT', value: 'NOT'},
            ]
          },
          type: {
            value: 'accurate',
            option: [
              {label: '精确', value: 'accurate'},
              {label: '模糊', value: 'fuzzy'}
            ]
          }
        }
      ]
    },
    show(searchType){
        this.searchType = searchType;
        this.isAdvancedDisabled = false;
        this.initAdvanceSearch()
        this.$refs.advanceSearch.show();
    },
    // 高级检索
    doSearchWithStrategy(){
      const conditions = this.advanceSearchMap[this.searchType].map((item, index) => ({
        field: item.field.value,          
        value: item.value,               
        relation: index === 0 ? null : item.relation.value, 
        type: item.type.value           
      }))
      let param = {searchType:this.searchType,conditions:conditions}
      console.log(param)
      this.$emit('searchData', param)
    },
    getOptionLabel (strategy) {
      for (let i = 0; i < strategy.field.option.length; i++) {
        let option = strategy.field.option[i]
        if (option.value === strategy.field.value) {
          return option.label
        }
      }
    },
    addStrategy () {
      let newFieldValue
      let searchStrategy = this.advanceSearchMap[this.searchType]
      let fieldValueOld = []
      searchStrategy.forEach(item => {
        fieldValueOld.push(item.field.value)
      })
      for (let i = 0; i <  searchStrategy[0].field.option.length; i++) {
        let option =  searchStrategy[0].field.option[i]
        if (!this.arrayContains(fieldValueOld, option.value)) {
          newFieldValue = option.value
          break
        }
      }
      let strategy = JSON.parse(JSON.stringify(searchStrategy[1]))
      strategy.field.value = newFieldValue
      strategy.value = null
      searchStrategy.push(strategy)
      this.$forceUpdate()
    },
    forceUpdate () {
      this.$forceUpdate()
    },
    removeStrategy (index) {
      this.advanceSearchMap[this.searchType].splice(index, 1)
      this.$forceUpdate()
    },
    hide(){
      this.$refs.advanceSearch.hide();
      this.resetStrategy();
    },
    resetStrategy () {
      this.searchStrategy = {}
      this.dateRangeStart = ''
      this.dateRangeEnd = ''
      this.isAdvancedDisabled = true
      this.initAdvanceSearch()
    },

  }
}
</script>

<style lang="scss">
@import "@zkwq/business/dist/var.scss";
 .AdvancedSearch__content{
    overflow-x: hidden;
  }
  .DateLabel {
    text-align: center;
    color: $--color-text-secondary;
  }
  .AdvancedSearchBarInput {
    background-image: linear-gradient(0deg, #ffffff 0%, #f3f5f8 100%);
    //border: 2px solid #fff;
    border: 1px solid #bfc3de;
    // box-shadow: 8px 8px 20px 0 rgba(55,99,170,.1);
    //border-radius: 100px;
    border-radius: 4px;
    transition: border-color .3s;
    &:hover {
      border-color: $--color-primary;
    }
  }
  .Rows {
  }
  .Row {
    margin-bottom: 12px;
    .Button {
      margin-top: 8px;
      margin-left: 8px;
      &:hover {
        opacity: .8;
      }
    }
    i {
      font-size: 22px;
    }
  }
  .Row--date {
    display: flex;
    align-items: center;
    // color: $--color-text-secondary;
    font-size: $--font-size-base;
  }
  .RowActions {
    //margin-left: 13%;
    position: relative;
    margin-top: 36px;
    margin-bottom: 16px;
    text-align: right;
    .base-button {
      min-width: 116px;
    }
  }
  .AdvancedSearchSubmitButton {

  }
  .AdvancedSearchBar--professional {
    flex-direction: column;
    justify-content: center;
    .RowActions {
      margin-left: 0;
    }
  }
  .AdvancedSearchBarInput {
    .base-input__inner {
      padding: 0 10px;
      line-height: 29px;
    }
  }
  .AdvancedSearchBarSelect {
    .base-input {
      min-width: 84px;
      //box-shadow: 8px 8px 20px 0 rgba(55,99,170,.1), inset 0 4px 20px 0 hsla(0deg,0%,100%,.5);
      //border: 2px solid #FFF;
      border: 1px solid #bfc3de;
      background-image: linear-gradient(0deg,#fff,#f3f5f8);
      //border-radius: 100px;
      border-radius: 4px;
      padding: 0 12px 0 16px;
      line-height: 29px;
      transition: border-color .3s;
      &:hover {
        border-color: $--color-primary;
      }
      &.is-focused {
        border-color: $--color-primary;
        border-radius: 4px 4px 0 0;
        border-bottom-color: $--color-white;
      }
    }
    .base-input__inner {
      color: $--color-primary;
      &::placeholder {
        color: $--color-text-regular;
      }
    }
    .base-input__suffix {
      right: 8px;
    }
  }
  .AdvancedSearchBarSelectPopper {
    //background-image: linear-gradient(0deg, #fff 0%, #f3f5f8 100%);
    //border: 2px solid #fff;
    border: 1px solid $--color-primary;
    border-top: none;
    box-shadow: 8px 8px 20px 0 rgba(55,99,170,.1);
    border-radius: 0 0 4px 4px;
   //margin-top: -2px!important;
    .base-select-dropdown__item {
      padding: 0 12px 0 16px;
      color: $--color-text-regular;
      &.hover {
        background: transparent;
      }
      &:hover {
        background: transparent;
        color: $--color-primary;
      }
    }
    .base-select-dropdown__item.selected {
      color: $--color-primary;
      font-weight: 500;
      cursor: default;
    }
  }
  .AdvancedSearchBarDatePicker {
    &.base-input {
      width: 100%;
      min-width: 84px;
      //box-shadow: 8px 8px 20px 0 rgba(55,99,170,.1), inset 0 4px 20px 0 hsla(0deg,0%,100%,.5);
      //border: 2px solid #FFF;
      border: 1px solid #bfc3de;
      background-image: linear-gradient(0deg,#fff,#f3f5f8);
      //border-radius: 100px;
      border-radius: 4px;
      padding: 0 12px 0 16px;
      line-height: 29px;
      transition: border-color .3s;
      &:hover {
        border-color: $--color-primary;
      }
      &.is-focused {
        border-color: $--color-primary;
        border-radius: 4px 4px 0 0;
      }
    }
    .base-input__inner {
      color: $--color-primary;
      &::placeholder {
        color: $--color-primary;
      }
    }
    .base-input__suffix {
      right: 8px;
    }
  }
  .AdvancedSearchBarTextArea {
    width: 100%;
    margin: 16px 0 0;
    position: relative;
    background-image: linear-gradient(0deg, #ffffff 0%, #f3f5f8 100%);
    border: 2px solid #fff;
    box-shadow: 8px 8px 20px 0 rgba(55,99,170,.1);
    .base-textarea.is-focused {
      .base-textarea__inner {
        //background-color: $--color-white;
        //border-color: $--color-text-secondary;
      }
    }
    .base-textarea__inner {
      border: none;
      background-color: transparent;
      padding: 9.5px;
    }
  }
</style>